import React from 'react'
import { connect } from 'react-redux'
import { Result, List, Button, WhiteSpace, Modal } from 'antd-mobile'
import Cookies from 'js-cookie'
import { reset_user } from '../../redux/action'
const myImg = src => (
  <img
    src={src}
    style={{ width: '70px', height: '70px' }}
    className="spe am-icon am-icon-md"
    alt=""
  />
)
const Item = List.Item
const Brief = Item.Brief
const alert = Modal.alert
// 个人中心
class Personal extends React.Component {
  layOut = () =>
    alert('退出', '确认退出登录吗?', [
      {
        text: '取消'
      },
      {
        text: '确认',
        onPress: () => {
          // 清除Cookies
          Cookies.remove('userId')
          // 清除redux
          this.props.reset_user()
        }
      }
    ])

  render() {
    const { username, header, company, info, salary, post } = this.props.user
    return (
      <div style={{ marginBottom: 50, marginTop: 50 }}>
        <Result
          img={myImg(
            `http://119.3.254.20:3000/public/images_react/${header}.png`
          )}
          title={username}
          message={company}
        />
        <List renderHeader={() => '相关信息'}>
          <Item>
            <Brief>职位:&nbsp;&nbsp;&nbsp;{post}</Brief>
            <Brief>简介:&nbsp;&nbsp;&nbsp;{info}</Brief>
            {salary ? <Brief>薪资:&nbsp;&nbsp;&nbsp;{salary}</Brief> : null}
          </Item>
        </List>
        <WhiteSpace />
        <Button type="warning" onClick={() => this.layOut()}>
          退&nbsp;&nbsp;&nbsp;出
        </Button>
      </div>
    )
  }
}
export default connect(state => state => ({ user: state.user }), {
  reset_user
})(Personal)
